<template>
  <div id='store_brand'>
    <Row type='flex' justify='end' style="padding:25px">
      <Col>
        <Button class="btn" type="primary" style="width: 80px;" @click='skipAdd'>添加</Button>
      </Col>
    </Row>
    <Table stripe class="table-list" :data="tableData" :columns="columns" :height='tableHeight' :loading='loading'>
      <template slot-scope="{ row }" slot="action">
        <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)'></i>
        <Poptip confirm title="确认删除此品牌吗？" transfer @on-ok='delGroup(row)' style="text-align:left">
          <i class="iconsys icondel" title="删除"></i>
        </Poptip>
      </template>
    </Table>
    <Drawer width="480" :title='title' :transfer='false' v-model='drawShow'>
      <Row type='flex' justify='center'>
        <Col>
          <Form ref='formData' :model="formData" :rules='rule' style="margin-top: 20px;" :label-width='90'>
            <FormItem prop="brandName" label='品牌名称：'>
              <Input type="text" v-model="formData.brandName" style="width:280px" placeholder="请输入" :maxlength="16"></Input>
            </FormItem>
          </Form>
        </Col>
      </Row>
      <div class="demo-drawer-footer">
        <Button  @click="drawShow = false" style="margin-right: 15px;">取消</Button>
        <Button type="primary" @click="submit">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { brandList, addBrand, delBrand, editBrand } from '@/api/system/tag'
export default {
  watch: {
    drawShow (status) {
      if (!status) {
        this.$refs.formData.resetFields()
      }
    }
  },
  computed: {
    tableHeight () {
      return this.tableData.length > 10 ? 520 : 0
    }
  },
  data () {
    return {
      loading: false,
      brandId: '',
      drawShow: false,
      title: '添加品牌',
      formData: {
        brandName: ''
      },
      rule: {
        brandName: { required: true, message: '请输入品牌名称', trigger: 'change' }
      },
      tableData: [],
      columns: [
        {
          title: '品牌名称',
          key: 'brandName'
        },
        {
          title: '操作时间',
          key: 'createTime'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200
        }
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    skipAdd () {
      this.drawShow = true
      this.title = '添加品牌'
    },
    skipEdit (row) {
      this.drawShow = true
      this.title = '编辑品牌'
      this.formData.brandName = row.brandName
      this.brandId = row.brandId
    },
    submit () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          let data = {
            merchantId: this.$store.state.user.merchantId,
            brandName: this.formData.brandName
          }
          if (this.title === '添加品牌') {
            addBrand(data).then(res => {
              if (res.data.status === 200) {
                this.$Message.success('新增成功！')
                this.drawShow = false
                this.getData()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            }).catch(err => {
              this.$Message.error(`${err}`)
            })
          } else {
            editBrand({ ...data, brandId: this.brandId }).then(res => {
              if (res.data.status === 200) {
                this.$Message.success('编辑成功！')
                this.drawShow = false
                this.getData()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            }).catch(err => {
              this.$Message.error(`${err}`)
            })
          }
        }
      })
    },
    delGroup (row) {
      delBrand({
        brandId: row.brandId,
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功！')
          this.getData()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getData () {
      this.loading = true
      brandList({ merchantId: this.$store.state.user.merchantId }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.loading = false
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang="less">
  #store_brand{
    .demo-drawer-footer{
      width: 480px;
      position: absolute;
      bottom: 0;
      right: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
    }
  }
</style>
